<template>
  <div class="container">
    <!-- 顶部的两个东西 -->
    <ul>
      <!-- <router-link tag="li" to="/shop"></router-link> -->
      <!-- 返回历史记录上一级 -->
      <li @click="$router.go(-1)"></li>

      <li></li>
    </ul>
    <!-- 顶部 -->
    <div class="top">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerData.imgList" :key="item.key">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 书本介绍 -->
      <div class="under">
        <div class="text">
          <!-- index就是书本的数据对应的下标 -->
          <h4>{{ bannerData.title }}</h4>
        </div>

        <div class="num">
          <h6>
            ￥{{ bannerData.disprice }} <s>￥{{ bannerData.price }}</s>
          </h6>
        </div>
        <div class="bottom">
          <div class="left">快递:免运费</div>
          <div class="right">销量{{ bannerData.saleNum }}笔</div>
        </div>
      </div>
    </div>

    <div class="line"></div>

    <!-- 详情评论 -->
    <div class="main">
      <ul>
        <li :class="[index==1?'con':'']" @click="moreabout">详情</li>
        <li :class="[index==2?'con':'']" @click="talkabout">评论</li>
      </ul>
    </div>

    <!-- 详情 -->
    <div class="picture" v-show="index==1">
      <div class="pic" v-html="bannerData.detail"></div>
    </div>

    <!-- 评论 -->
    <div class="comtext" v-show="index==2">
      <div class="comments">
        <div class="left">全部评论(0)条</div>

        <div class="right">
          好评度
          <van-rate
            v-model="value"
            :size="10"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
        </div>
      </div>

      <div class="text">
        <h6>还没有人评论过哟</h6>
      </div>
    </div>


    <!-- 底部 -->
    <div class="bottom container">
      <div class="bottombox">
        <div class="text">
           <h5 class="kefu">
            <i></i>
            <h6>客服</h6> 
          </h5>
          <!-- 购物车 -->
          <div @click="car" class="car" >
            <i :class="[carnum == 0 ? '' : 'icon']"></i>
            <h6>购物车</h6>
          </div>

         

          <!-- 没收藏 -->
          <h6 v-if="bannerData.coll == false">
            <i @click="shoucang({ bannerData })"></i>
            <span>收藏</span>
          </h6>
          <!-- 已收藏 -->
          <h6 class="yishoucang" v-if="bannerData.coll == true">
            <i></i>
            <span>已收藏</span>
          </h6>

          
        </div>

        <div class="shopcar" @click="joinCar({ bannerData })">加入购物车</div>

        <div class="buynow" @click="tobuy({bannerData})">立即购买</div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import { useRoute } from "vue-router";
import { getShopMessageData } from "../assets/api/home";
import router from "@/router";
import { useStore } from "vuex";
export default {
  setup() {
    //评价
    const value = ref(3);
    //点击切换
    let index = ref(1)
    let moreabout=()=>{
      index.value=1
    }
    let talkabout=()=>{
      index.value=2
    }
    //判断购物车是否有内容
    let carnum = ref(0);
    let carData = () => {
      carnum.value = store.state.shoppingCar.length;
      // console.log(carnum.value);
    };

    //跳转到购物车界面
    let car = () => {
      router.push({
        path: "/shoppingcar",
      });
    };
    //书城传来的数据key值
    let route = useRoute();
    let store = useStore();
    // console.log(route.query.key);

    let bannerDataFun = reactive({
      bannerData: [],
      key: [],
      colle: [],
    });
    //点击进来书本的值
    let booknumber = ref(0);
    //书本书籍数据
    //从book页传来的参数
    getShopMessageData(route.query.key).then((data) => {
      //轮播图信息
      bannerDataFun.bannerData = data.data.results.body.detail;
      bannerDataFun.bannerData["coll"] = false;
      //点击进入详情页显示的key值
      booknumber.value = bannerDataFun.bannerData.key;
      // window.localStorage.setItem("booknumber",JSON.stringify(booknumber.value))

      //获取进入的key
      // booknumber.value = JSON.parse(window.localStorage.getItem("booknumber"));
      // console.log("点击进来的key==>",booknumber.value);
      let a = store.state.collec.findIndex(
        (item) => item.bannerData.key == booknumber.value
      );
      if (a != -1) {
        bannerDataFun.bannerData.coll = true;
      }
    });

    //加入购物车
    let joinCar = (data) => {
      // console.log(data.bannerData);
      //判断是否登录
      //判断是否加入
      let token = store.state.phone;
      if (!token) {
        router.push({
          path: "/login",
        });
      } else {
        store.commit("jsonCar", data);
        carData();
      }
    };

    //立即购买
    let tobuy = (item)=>{
      //执行功能
      item.bannerData.num=1
      store.commit("thisbuynow",item)
      
      router.push({
        path:"/settlement",
      })
      // console.log(item.bannerData);
      window.localStorage.setItem("allmoney",JSON.stringify(item.bannerData.disprice))

    }
    //调用函数显示小红点
    carData();
    let booles = ref(false);

    // 收藏
    let shoucang = (item) => {
      // console.log("点击进入详情页的key==>", booknumber.value);
      // console.log("点击的收藏后显示==>", item.bannerData.key);
      let token = store.state.phone;
      //判断是否登录
      if (!token) {
        router.push({
          path: "/login",
        });
      } else {
        // 点击收藏
        bannerDataFun.bannerData.coll = true;
        //收藏保存到vuex
        store.commit("collecDel", item)

        // let a =store.state.collec.findIndex(item =>item.bannerData.key == bannerDataFun.bannerData.key)
        // console.log(a);
        // if(a !=-1){
        //   bannerDataFun.bannerData.coll = true
        // }
      }
    };

    return {
      ...toRefs(bannerDataFun),
      car,
      joinCar,
      carData,
      carnum,
      shoucang,
      booles,
      index,
      moreabout,
      talkabout,
      value,
      tobuy
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";

.container > ul li:nth-child(1) {
  position: fixed;
  width: 30px;
  height: 30px;
  top: 20px;
  left: 15px;
  background-image: url(../assets/img/ic_bd_back.225e939.png);
  background-size: 30px 30px;
  z-index: 10;
}

.container > ul li:nth-child(2) {
  position: fixed;
  width: 30px;
  height: 30px;
  top: 20px;
  right: 15px;
  background-image: url(../assets/img/ic_bd_share.eab5445.png);
  background-size: 30px 30px;
  z-index: 10;
}

.top .img {
  width: 100%;
}

.top .img img {
  width: 100%;
  /* height: 376px; */
}

.top .under {
  display: flex;
  flex-direction: column;
}

.top .under .text {
  padding: 0px 15px;
  height: 60px;
  line-height: 60px;
}

.top .under .text h4 {
  font-weight: bold;
}

.top .under .num h6 {
  color: #f7612e;
  font-size: 18px;
  font-weight: bolder;
}

.top .under .num {
  padding: 0px 15px;
}

.top .under .num s {
  font-size: 12px;
  transform: scale(0.7);
  color: #c4c5ca;
}

.top .under .bottom {
  display: flex;
  font-size: 12px;
  color: #8a91a3;
  height: 38px;
  line-height: 38px;
  justify-content: space-between;
  position: relative;
  margin-top: 22px;
  border-top: 1px solid #efefef;
}

.top .under .bottom .left {
  padding-left: 15px;
}

.top .under .bottom .right {
  padding-right: 15px;
}

.line {
  width: 100%;
  height: 10px;
  background-color: #f6f7f9;
}

.main {
  display: flex;
  flex-direction: column;
  /* padding: 0px 15px; */
}

.main ul {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #efefef;
}

.main ul li {
  width: 50%;
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 14px;
  color: #c7c7c7;
  font-weight: bold;
}

.main ul li.con {
  color: #20211b;
}

.picture {
  padding: 0px 15px;
}

.pic {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pic img {
  width: 100%;
}

.container > .bottom {
  box-shadow: 0px 0px 7px 0px #8e9198;
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  bottom: 0px;
}

.bottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 100%;
}

.bottom .bottombox {
  display: flex;
  height: 56px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.bottom > .bottombox > .text {
  display: flex;
  width: 30%;
  // margin-left: 15px;
  padding-left: 16px;
  // border-right: 1px solid #efefef;

}

.bottom > .bottombox > .text > h6 {
  display: flex;
  // margin-right: 23px;
  color: #8e9198;
  flex-direction: column;
  align-items: center;
  flex: 1;
  span{
        transform: scale(0.8);
  }

}
//收藏
.bottom > .bottombox > .text > h6 i {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../assets/img/收藏.png);
  background-size: 20px 20px;
    margin-bottom: 5px;
}
.bottom > .bottombox > .text > h5{
  font-size: 12px;
  color: #989ba1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  h6{
      transform: scale(0.8);
  }

}
.bottom > .bottombox > .text > h5 i{
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../assets/img/list.png);
  background-size: 18px 18px;
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  color: #989ba1;
  font-size: 12px;
  margin-bottom: 5px;
    
  
}
.bottom > .bottombox > .text .yishoucang {
  display: flex;
  // margin-right: 23px;
  color: #8e9198;
  flex: 1;
  span{
        transform: scale(0.8);
  }
}
//已收藏
.bottom > .bottombox > .text .yishoucang > i {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../assets/img/yishoucang.png);
  background-size: 20px 20px;
    margin-bottom: 5px;
}
.bottom > .bottombox > .text > .car{
  align-items: center;
  color: #989ba1;
  display: flex;
  flex-direction: column;
  h6{
        transform: scale(0.8);
  }
}
.bottom > .bottombox > .text > .car > i {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../assets/img/ic_car.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
    margin-bottom: 5px;
}

.bottom > .bottombox > .text > div > i.icon {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../assets/img/bk-buy-h.439cdfb.png);
  background-size: 20px 20px;
}

.bottom .shopcar {
  width: 25%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  background-color: #ffac3a;
  color: #fff8ff;
  border-radius: 3px;
  font-weight: bolder;
}

.bottom .buynow {
  width: 25%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  background-color: #fd5f32;
  color: #fff8ff;
  border-radius: 3px;
  font-weight: bolder;
  margin-right: 15px;
}

.inside {
  display: flex;
  flex-direction: column;
}

.inside .topbox {
  margin-top: 7px;
  padding: 0px 15px;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
}

.inside .topbox h6 {
  height: 33px;
  line-height: 33px;
}

.inside .topbox h5 {
  font-size: 12px;
  background-color: #f7f7f7;
  height: 23px;
  line-height: 23px;
}

.inside .bottombox {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.comtext>.text {
  display: flex;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.comments {
  padding: 0px 15px;
  display: flex;
  justify-content: space-between;
}
.comments .left {
  font-size: 12px;
  color: #000000;
  height: 46px;
  line-height: 46px;
}
.comments .right {
  font-size: 12px;
  height: 46px;
  line-height: 46px;
}
</style>